<template>
    <div>
        <Row type="flex" justify="center" class="code-row-bg">
            <!--左侧-->
            <ICol span="16">
                <Card dis-hover>
                    <p slot="title">
                        <Icon type="md-contacts"/>
                        博主推荐的其他博客：
                    </p>
                    <a slot="extra" @click="showFriendBLogVisable">
                        <Icon type="ios-loop-strong"></Icon>
                        申请加入友链
                    </a>
                    <div style="display: flex;flex-wrap: wrap">
                        <Button style="margin: 8px"
                                v-for="(item,index) in FriendBlogList" :key="index" type="info"
                                ghost :to="item.furl">
                            {{item.fname}}
                        </Button>
                    </div>
                </Card>
            </ICol>
            <!--右侧-->
            <ICol span="6" style="margin-left: 2%">
                <Sider/>
            </ICol>
        </Row>
        <!--添加友链对话框-->
        <Modal v-model="friendVisable" title="申请加入友链" @on-ok="addFriend('friendVoRef')"
               @on-cancel="friendVisable=false">
            <Form ref="friendVoRef" :model="friendVo" :rules="friendVoRule" :label-width="150">
                <FormItem label="友链网站名称：" prop="name">
                    <Input v-model="friendVo.name" placeholder="请输入你的友链网站名称"/>
                </FormItem>
                <FormItem label="友链地址：" prop="url">
                    <Input v-model="friendVo.url" placeholder="请一定要加上http或https 如：http://www.baidu.com"
                           @keyup.native.enter="addFriend('friendVoRef')"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
  import Sider from '../components/sider/Sider'

  export default {
    data () {
      return {
        FriendBlogList: [],
        friendVisable: false,
        friendVo: {
          name: '',
          url: ''
        },
        friendVoRule: {
          name: [
            {
              required: true,
              message: '网站名称不能为空',
              trigger: 'blur'
            }
          ],
          url: [
            {
              required: true,
              message: '网站地址不能为空',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    components: {
      Sider
    },
    mounted () {
      this.getFriendBlog()
    },
    methods: {
      getFriendBlog () {
        this.$http.get('friendBlog').then(res => {
          res = res.data
          if (res.code === 0) {
            this.FriendBlogList = res.data
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      },
      // 检验是否登陆
      showFriendBLogVisable () {
        if (!window.localStorage.getItem('lhamster_identity_info')) {
          this.$store.dispatch('showLogin')
          this.$Message.info('请登录后再操作')
          return
        }
        this.friendVisable = true
      },
      // 添加友链
      addFriend (name) {
        this.$refs[name].validate(valid => {
          if (!valid) return
          // 添加友链请求
          this.$http.post('friend-blog', new URLSearchParams(this.friendVo)).then(res => {
            res = res.data
            if (res.code === 6501) {
              // 重置数据
              this.$refs[name].resetFields()
              // 重新请求
              this.getFriendBlog()
              // 关闭窗口
              this.friendVisable = false
              // 提示成功
              this.$Notice.success({ title: '友链申请成功，请等待审核' })
              // vuex获取用户的消息通知
              this.$store.dispatch('informInfo', this)
            } else {
              this.$Notice.error({ title: res.msg })
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
